<template>
  <view>
    <view class="info-item" @click="updateTouxiang">
      <view class="info-item-text">
        头像
      </view>
      <view class="info-item-img">
        <!-- <image src="/static/circletouxiang.jpg" mode=""></image> -->
        <u--image :showLoading="true" :src="touxiangAddress" width="40px" height="40px" shape="circle"></u--image>
        <uni-icons type="forward" class="icon" size="20" color="#8F9CA9"></uni-icons>
      </view>
    </view>
    <view class="detail-info-item">
      <text>昵称</text>
      <uni-easyinput v-model="userInfo.nickName" placeholder="请输入你的昵称" :inputBorder="false" />
      <uni-icons type="forward" class="icon" size="20" color="#8F9CA9"></uni-icons>
    </view>
    <view class="detail-info-item">
      <text>性别</text>
      <uni-data-select v-model="userInfo.sex" :localdata="range" @change="change" class="selectSex"></uni-data-select>
      <uni-icons type="forward" class="icon" size="20" color="#8F9CA9"></uni-icons>
    </view>
    <view class="detail-info-item" @click="datePickerShow = true">
      <text>生日</text>
      <uni-easyinput :value="birthday" :inputBorder="false" disabled="true" style="{width: 100px;}" />
      <u-datetime-picker :show="datePickerShow" v-model="userInfo.birthday" mode="date" @cancel="datePickerShow = false"
        minDate="-28800" @confirm="birthdaySelect"></u-datetime-picker>

      <uni-icons type="forward" class="icon" size="20" color="#8F9CA9"></uni-icons>
    </view>
    <view class="detail-info-item">
      <text>手机号</text>
      <uni-easyinput v-model="userInfo.phonenumber" placeholder="请输入你的手机号" :inputBorder="false" />
      <uni-icons type="forward" class="icon" size="20" color="#8F9CA9"></uni-icons>
    </view>
    <view class="detail-info-item">
      <text>邮箱</text>
      <uni-easyinput v-model="userInfo.email" placeholder="请输入你的邮箱" :inputBorder="false" />
      <uni-icons type="forward" class="icon" size="20" color="#8F9CA9"></uni-icons>
    </view>
    <view class="save-button">
      <u-button text="保存" shape="circle" size="large" @click="save"></u-button>
    </view>
  </view>
</template>

<script>
  import image from '../../uni_modules/uview-ui/libs/config/props/image';
  export default {
    data() {
      return {
        birthday: '请选择你的生日',
        datePickerShow: false,
        // 后端要得头像地址
        houduantouxiang: '',
        // 头像地址
        touxiangAddress: '',
        //图片前缀
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        range: [{
          value: 0,
          text: '男'
        }, {
          value: 1,
          text: '女'
        }],
        userInfo: {
          nickName: null,
          sex: 0,
          birthday: null,
          phonenumber: null,
          email: null
        }
      };
    },
    onLoad() {
      // 调用获取用户信息函数
      this.getUserInfo()
    },
    methods: {
      onClose() {
        this.show = false
        console.log('123');
      },
      // 删除头像
      async deleteTouxiang() {
        const res = await uni.$http.post('/personalcenter/remove/avater', {
          fileName: this.houduantouxiang
        })
        console.log(res);
      },
      // 更换头像
      updateTouxiang() {
        let that = this
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: function(res) {
            // let thatTwo = that
            uni.showLoading({
              title: '图片上传中',
              mask: true
            })
            uni.uploadFile({
              url: 'https://www.scbjlr.com/api/personalcenter/uploading/avater',
              file: image,
              filePath: res.tempFilePaths[0],
              header: {
                Authorization: 'Bearer ' + uni.getStorageSync('token')
              },
              name: 'file',
              success(result) {
                console.log(result);
                const touxiangData = JSON.parse(result.data)
                that.touxiangAddress = that.imgPrefixAddress + touxiangData.data
                that.houduantouxiang = touxiangData.data
                if (touxiangData.data == '/user/caishe.png') return
                that.deleteTouxiang()
              },
              fail(err) {},
              complete() {
                uni.hideLoading()
              }
            })
          }
        })
      },
      // 获取用户信息
      async getUserInfo() {
        const res = await uni.$http.get('/personalcenter/userdetails')
        if (res.data.code !== 200) return uni.$showMsg('获取用户信息失败')
        console.log(res);
        this.houduantouxiang = res.data.data.avatar
        const timeFormat = uni.$u.timeFormat;
        this.birthday = timeFormat(res.data.data.birthday, 'yyyy-mm-dd')
        this.touxiangAddress = this.imgPrefixAddress + res.data.data.avatar
        this.userInfo = res.data.data
      },
      change(e) {
        this.userInfo.sex = e
      },
      birthdaySelect(v) {
        const timeFormat = uni.$u.timeFormat;
        let a = timeFormat(v.value, 'yyyy-mm-dd')
        console.log(a);
        this.birthday = a + ''
        this.userInfo.birthday = a + ''
        this.datePickerShow = false
      },
      async save() {
        const res = await uni.$http.post('/personalcenter/revamp', this.userInfo)
        if (res.data.code !== 200) return uni.$showMsg('保存失败')
        uni.$showMsg('修改成功')
        uni.redirectTo({
          url: '/pages/my/my'
        })
      }
    }
  }
</script>

<style lang="scss">
  .info-item {
    padding: 0 45rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    border-bottom: 1px solid #8F9CA9;
    height: 60px;
    margin-left: 5px;


    .info-item-text {
      font-size: 14px;
      color: #141414;
    }

    .info-item-img {
      display: flex;
      // position: relative;
      align-items: center;
    }
  }

  .detail-info-item {
    display: flex;
    align-items: center;
    width: 85%;
    height: 60px;
    margin-left: 5px;
    padding: 0 45rpx;
    border-bottom: 1px solid #8F9CA9;

    text {
      font-size: 14px;
      color: #141414;
      width: 90px;
    }

    .selectSex {
      width: 210px;
      border: none;
    }
  }

  .save-button {
    width: 300rpx;
    height: 100rpx;
    margin: 30rpx auto;
  }
</style>